<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '订单管理'}, {name: '订单详情'}]"></v-breadcrumb>

        <div class="g-box" v-if="info">
            <div class="table">
                <table class="width100 vd-table">
                    <tbody>
                    <tr>
                        <td style="width:130px">订单ID</td>
                        <td>{{info.id}}</td>
                    </tr>
                    <!--          <tr>-->
                    <!--            <td>用户</td>-->
                    <!--            <td>-->
                    <!--              <div class="flex-center flex-start">-->
                    <!--                <el-image style="font-size:0;width:44px;height:44px;margin:0;padding:0;"-->
                    <!--                          fit="cover" :preview-src-list="[info.user.image]" :src="info.user.image">-->
                    <!--                </el-image>-->
                    <!--                <span class="ml-10">{{info.user.nickname}}</span></div>-->
                    <!--            </td>-->
                    <!--          </tr>-->
                    <tr>
                        <td>订单状态</td>
                        <td>
                            <el-button v-preventDbClick v-for="(item,index) in orderStatuses" :key="index"
                                       v-if="item.id==info.status"
                                       plain size="mini" :type="item.type">
                                {{item.name}}
                            </el-button>
                        </td>
                    </tr>
                    <tr>
                        <td>价格</td>
                        <td>
                            <span>{{info.prices}}元</span>
                            <span
                                v-if="info.last_price!=0">（首付款：{{info.first_price}}元，尾款：{{info.last_price}}元）</span>
                        </td>
                    </tr>
                    <tr v-if="info.special!=0">
                        <td>特殊优惠</td>
                        <td>{{info.special}}元</td>
                    </tr>
                    <tr>
                        <td>微信订单号</td>
                        <td>{{info.wx_order_id||'-'}}</td>
                    </tr>
                    <tr v-if="info.last_wx_order_id">
                        <td>尾款订单号</td>
                        <td>{{info.last_wx_order_id}}</td>
                    </tr>
                    <tr>
                        <td>订单类型</td>
                        <td>
                            <el-button v-preventDbClick v-for="(item,index) in promotionTypes" :key="index"
                                       v-if="item.id==info.promotion_type"
                                       plain size="mini" :type="item.type">
                                {{item.name}}
                            </el-button>
                            <el-button v-preventDbClick plain size="mini" type="info" v-if="!info.promotion_type">
                                普通购买，非促销活动
                            </el-button>
                        </td>
                    </tr>
                    <tr>
                        <td>收货方式</td>
                        <td>
                            <el-button v-preventDbClick v-for="(item,index) in takeGoodsTypes" :key="index"
                                       v-if="info.take_goods_type==item.id"
                                       plain size="mini" :type="item.type">
                                {{item.name}}
                            </el-button>
                        </td>
                    </tr>
                    <tr v-if="info.take_goods_type!=1">
                        <td>收货人</td>
                        <td>
                            <div class="mb-5">{{info.user_address.contact}} {{info.user_address.mobile}}</div>
                            <div>{{info.user_address.province}} {{info.user_address.city}}
                                {{info.user_address.district}}
                                {{info.user_address.address}}
                            </div>
                        </td>
                    </tr>
                    <tr v-if="info.take_goods_type==1">
                        <td>公司提货点</td>
                        <td>
                            <div class="mb-5">{{info.company_address.contact}} {{info.company_address.mobile}}</div>
                            <div>{{info.company_address.province}} {{info.company_address.city}}
                                {{info.company_address.district}}
                                {{info.company_address.address}}
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:130px">用户留言</td>
                        <td>{{info.remark||'-'}}</td>
                    </tr>

                    <tr>
                        <td>下单时间</td>
                        <td>{{info.c_time|formatDateTime}}</td>
                    </tr>

                    <tr v-if="info">
                        <td>商品列表</td>
                        <td>
                            <div class="flex-center flex-start mb-10 last-item" v-for="(item,index) in info.goodses"
                                 :key="index">
                                <el-image style="font-size:0;width:70px;height:70px;margin:0;padding:0;"
                                          fit="cover" :preview-src-list="[item.goods_image]" :src="item.goods_image">
                                </el-image>
                                <div class="ml-10">
                                    <div class="t-hidden" style="max-width: 500px;">商品名称：{{item.goods_name}}</div>
                                    <div class="color-666" style="margin:8px 0;">
                                        <span>商品规格：</span>
                                        <span class="mr-10" v-for="(item2,index2) in JSON.parse(item.spec_info)"
                                              :key="index2">{{item2.specification}}（{{item2.price}}元）</span>
                                        <span v-if="JSON.parse(item.spec_info).length==0">无</span>
                                    </div>
                                    <div class="color-666">
                                        价格数量：{{((Number(item.goods_price)+Number(item.spec_prices))).toFixed(2)}}元
                                        × {{item.len}}件
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>

                    <tr v-if="info.status>6&&info.take_goods_type==3">
                        <td>快递信息</td>
                        <td>
                            <span>快递公司：{{info.courier.courier_name}}</span>
                            <span class="ml-30">快递单号：{{info.courier.courier_no}}</span>
                        </td>
                    </tr>
                    <tr v-if="info.status>6&&info.take_goods_type==1">
                        <td>提货码</td>
                        <td>{{info.courier.picking_code}}</td>
                    </tr>
                    <tr v-if="info.status>6&&info.take_goods_type==2">
                        <td>骑手信息</td>
                        <td>
                            <span>姓名：{{info.courier.delivery_boy_name||'-'}}</span>
                            <span class="ml-30">电话：{{info.courier.delivery_boy_mobile||'-'}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>操作</td>
                        <td>
                            <el-button v-preventDbClick v-if="info.status==1" @click="showSetSpecialPrice"
                                       type="primary">优惠
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==5&&info.take_goods_type==3"
                                       @click="showDeliver"
                                       type="primary">异地发货
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==5&&info.take_goods_type==2"
                                       @click="showLocal"
                                       type="primary">填写骑手信息
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==5&&info.take_goods_type==1"
                                       @click="beReadyGoods" type="primary">备货完成
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==7" @click="receive" type="primary">
                                确定顾客已收货
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==9" @click="evaluate" type="primary">
                                替顾客默认好评
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==11&&info.last_wx_order_id"
                                       @click="showHandleReturn(3)"
                                       type="primary">退尾款
                            </el-button>
                            <el-button v-preventDbClick v-if="info.status==11||info.status==12"
                                       @click="showHandleReturn(1)"
                                       type="primary">处理退款
                            </el-button>
                            <el-button v-preventDbClick @click="gotoPage('/order/list')" type="info">返回订单列表
                            </el-button>
                        </td>
                    </tr>

                    </tbody>
                </table>

            </div>
        </div>

        <!--设置特殊优惠-->
        <v-order-set-special-price ref="setSpecialPrice" @toData="getData"></v-order-set-special-price>
        <!--发货-->
        <v-order-deliver ref="deliver" @toData="getData"></v-order-deliver>
        <!--同城配送-->
        <v-order-local ref="local" @toData="getData"></v-order-local>
        <!--处理退款退货-->
        <v-order-handle-return ref="handleReturn" @toData="getData"></v-order-handle-return>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            id: 0,
            info: '',
            orderStatuses: config.orderStatuses,
            takeGoodsTypes: config.takeGoodsTypes,
            promotionTypes: config.promotionTypes,
        };
    },

    computed: {},

    mounted() {
    },

    created() {
        this.id = this.$route.query.id ? this.$route.query.id : 0;
        this.getData();
    },

    methods: {
        showHandleReturn(return_type) {
            this.$refs.handleReturn.show(this.info, return_type);
        },
        showSetSpecialPrice() {
            this.$refs.setSpecialPrice.show(this.info);
        },
        showDeliver() {
            this.$refs.deliver.show(this.info);
        },
        showLocal() {
            this.$refs.local.show(this.info);
        },
        evaluate() {
            this.$confirm('确定替顾客默认好评吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/order/evaluate',
                    data: {order_id: this.id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            })
        },
        receive() {
            this.$confirm('确定顾客已收货吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/order/receive',
                    data: {order_id: this.id}
                }).then((res) => {
                    tool.message(res.msg, 'success', () => {
                        this.getData();
                    })
                })
            })
        },
        beReadyGoods() {
            this.$confirm('确定备货完成吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                request({
                    url: '/manage/order/beReadyGoods',
                    data: {order_id: this.id}
                }).then((res) => {
                    tool.message('操作成功，请通知顾客来取货', 'success', () => {
                        this.getData();
                    })
                })
            })
        },
        getData() {
            request({
                url: '/manage/order/one',
                data: {id: this.id}
            }).then((res) => {
                this.info = res.data;
            })
        },
    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");

tr {
    height: 50px;
}

.last-item {
    &:last-child {
        margin-bottom: 0;
    }
}
</style>
